<template>
    <div class="message-text">
        <div class="sc-message--text">
            <a v-if="isUrl(message.data.text)" target="_blank" :href="message.data.text">
                {{ message.data.text }}
            </a>

            <template v-else>
                <div
                    class="rich-text"
                    v-if="isRichText(message.data.text)"
                    v-html="message.data.text"
                ></div>

                <template v-else>
                    {{ message.data.text }}
                </template>
            </template>

            <div class="btn" v-if="message.hasBtn">
                <el-button type="primary" plain @click="emits('messageClick', message.btnType)">
                    {{ message.btnText }}
                </el-button>
            </div>
        </div>
        <div class="tabs-box" v-if="message.showTabs">
            <div class="border" v-if="category.length"></div>
            <div class="tabs">
                <div
                    class="tab"
                    v-for="item in category"
                    :key="item.id"
                    @click="debouncedTabsClick(item.id)"
                >
                    {{ item.categoryName }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, inject, onMounted } from 'vue'
import { debounce } from '@/utils/index.js' // 导入防抖函数
const props = defineProps({
    message: {
        type: Object,
        required: true,
    },
})

const emits = defineEmits(['messageClick', 'tabsClick'])

const categoryData = inject('category')

onMounted(() => {})

const category = computed(() => categoryData().category.value)

const tabsClick = (id) => {
    emits('tabsClick', id)
}

const debouncedTabsClick = debounce(tabsClick, 500, true) // 延迟 500ms

const isUrl = (s) => {
    return s.startsWith('http://') || s.startsWith('https://')
}

const isRichText = (str) => {
    // 检查字符串中是否包含 HTML 标签
    const htmlTagRegex = /<[^>]+>/
    // 检查字符串中是否包含常见的富文本标记
    const richTextMarkers = ['&nbsp;', '<br>', '<p>', '<strong>', '<em>', '<a>', '<img>']

    // 检查是否包含 HTML 标签
    if (htmlTagRegex.test(str)) {
        return true
    }

    // 检查是否包含富文本标记
    for (let marker of richTextMarkers) {
        if (str.includes(marker)) {
            return true
        }
    }

    // 如果都没有找到，则认为是普通字符串
    return false
}
</script>

<style scoped lang="scss">
.message--text {
    width: 100%;
}
.sc-message--text {
    padding: 12px;
    border-radius: 4px;
    line-height: 20px;
    font-size: 14px;
    position: relative;
    -webkit-font-smoothing: subpixel-antialiased;
    background: #fff;
    word-wrap: break-word;
    & > a {
        text-decoration: none;
    }
    .sc-message--text-content {
        white-space: pre-wrap;
    }

    .rich-text {
        max-width: 410px !important;
        word-break: break-all;
    }

    .btn {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 10px 0 4px;
    }
}

.sent {
    .sc-message--text {
        color: #fff;
        background-color: #ff8217;
        max-width: 360px;
        word-wrap: break-word;
    }
}

.received {
    .sc-message--text {
        color: #000;
        background-color: #fff;
    }
}

a.chatLink {
    color: inherit !important;
}

.tabs-box {
    width: 100%;
    margin-top: 20px;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    font-size: 14px;
    color: #000000;
    .border {
        height: 6px;
        background: rgba($color: #ff8217, $alpha: 0.5);
        border-radius: 4px;
        position: absolute;
        left: 0;
        right: 0;
        top: -4px;
    }
    .tabs {
        background: #fff;
        position: relative;
        z-index: 9;

        .tab {
            width: 100%;
            height: 44px;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
}
</style>
